<template>
  <el-dialog
    class="dialog"
    :visible.sync="_visible"
    :title="$t('common.staffDetail')"
    :append-to-body="true"
    width="700px"
    :before-close="handleClose"
  >
    <div class="content d-flex jc-center ai-center">
      <div class="img-box">
        <MyImg :src="formData.img_path" alt />
      </div>
      <el-form
        :rules="rules"
        :model="formData"
        label-width="100px"
        class="flex-1 form"
      >
        <el-form-item :label="$t('targets.person_name') + ':'">
          <span v-if="status === 'show'">{{ formData.person_name }}</span>
          <el-input v-else v-model="formData.person_name" />
        </el-form-item>
        <el-form-item :label="$t('targets.person_age') + ':'" prop="person_age">
          <span v-if="status === 'show'">{{ formData.person_age }}</span>
          <el-input v-else v-model="formData.person_age" />
        </el-form-item>
        <el-form-item :label="$t('targets.person_gender') + ':'">
          <span v-if="status === 'show'">{{
            formData.person_gender | formatGender
          }}</span>
          <el-select v-else v-model="formData.person_gender">
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('targets.person_idcard') + ':'">
          <div v-if="status === 'show' || isIdShow" class="d-flex ai-center">
            <span>{{ formData.person_idcard }}</span>
            <ValidatePwdPopover
              v-if="isIdShow"
              :personInfo="formData"
              @confirm="
                (res) => getEncryptInfo(res, 'person_idcard', 'isIdShow')
              "
            />
          </div>
          <el-input v-else v-model="formData.person_idcard" />
        </el-form-item>
        <el-form-item :label="$t('targets.person_addr') + ':'">
          <div v-if="status === 'show' || isAddrShow" class="d-flex ai-center">
            <span>{{ formData.person_addr }}</span>
            <ValidatePwdPopover
              v-if="isAddrShow"
              :personInfo="formData"
              @confirm="
                (res) => getEncryptInfo(res, 'person_addr', 'isAddrShow')
              "
            />
          </div>
          <el-input v-else v-model="formData.person_addr" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton v-if="status === 'show'" class="delete" @click="handleDelete">{{
        $t("common.delete")
      }}</MyButton>
      <MyButton v-else class="cancel" @click="handleCancelEdit">{{
        $t("common.cancelEdit")
      }}</MyButton>
      <MyButton class="confirm" @click="handleConfirm">{{
        status === "show" ? $t("common.modify") : $t("common.saveEdit")
      }}</MyButton>
    </div>
  </el-dialog>
</template>
<script>
import { genderList } from "@/utils/CONSTANT";
import MyImg from "@/components/Image.vue";
import MyButton from "@/components/Button.vue";
import util from "@/utils";
import { deleteStaffList, editStaff } from "./service";
import ValidatePwdPopover from "@/components/ValidatePwdPopover";
export default {
  components: {
    MyImg,
    MyButton,
    ValidatePwdPopover,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    row: {
      handler(val) {
        if (val) {
          this.$set(this, "formData", JSON.parse(JSON.stringify(val)));
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  data() {
    return {
      formData: {},
      isAddrShow: true,
      isIdShow: true,
      toShowKey: "",
      status: "show",
      genderList,
      rules: {
        person_age: [
          {
            pattern: /^([0-9]|[1-9][0-9]|[1-9][0-9][0-9])$/,
            trigger: "change",
            message: this.$t("targets.age_rule"),
          },
        ],
      },
    };
  },
  methods: {
    getEncryptInfo(res, key, isShowKey) {
      this.$set(this.formData, key, res.data.record[0][key]);
      this[isShowKey] = false;
    },
    handleDelete() {
      util.confirm(
        this.$t("common.deleteStaffDetail"),
        this.$t("common.deleteStaffDetailConfirm"),
        this.$t("common.deleteConfirm"),
        this.$t("common.cancel"),
        async () => {
          await deleteStaffList({
            lib_id: this.formData.lib_id,
            img_ids: this.formData.img_id,
          });
          this.cancel();
          this.$emit("refresh");
        }
      );
    },
    handleCancelEdit() {
      this.cancel();
    },
    cancel() {
      this._visible = false;
      this.formData = {};
      this.status = "show";
      this.isIdShow = true;
      this.isAddrShow = true;
    },
    handleClose(done) {
      this.cancel();
      done();
    },
    formatGender(gender) {
      return (
        gender && this.genderList.find((item) => item.value === gender).label
      );
    },
    async handleConfirm() {
      if (this.status === "show") {
        this.status = "edit";
      } else {
        const params = {
          ...this.formData,
          person_addr: !this.isAddrShow ? this.formData.person_addr : void 0,
          person_idcard: !this.isIdShow ? this.formData.person_idcard : void 0,
        };
        const res = await editStaff(params);
        if (res.code == 0) {
          util.msg.success("edit_success");
          this.cancel();
          this.$emit("refresh");
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
      // .el-form-item {
      //   margin-bottom: 10px;
      // }
      .el-select {
        width: 100%;
      }
    }
  }
  .eye {
    width: 20px;
    height: 10px;
    margin-left: 10px;
    background: url("../../assets/eye.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
